<template>
  <div class="whole">
    <section class="whole__bread-crumb">
      <BreadCrumb
        v-model:dateRange="dateRange"
        :show-date="true"
        @change="dateChange"
      />
    </section>
    <section class="base-page-container whole__search">
      <PanelLabelItem label="指标">
        <el-select v-model="targetSelect" placeholder="请选择" filterable>
          <el-option
            v-for="item in targetOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </PanelLabelItem>
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOptions"
        @change="deviceChange"
      />
      <BaseRadioGroupLabelItem
        v-model:select="userLabelSelect"
        label="用户标签"
        :options="userLabelOptions"
        @change="userLabelChange"
      />
      <PanelLabelItem label="用户类别" :no-margin-bottom="true">
        <PanelLabelItem label="用户" :is-text-right="true">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in userOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>
        <PanelLabelItem label="套餐时长">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in durationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>
        <PanelLabelItem label="会员类型">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in memberTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>
        <PanelLabelItem label="团队人数">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in teamCountOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>
        <PanelLabelItem label="付费行为">
          <el-select v-model="targetSelect" placeholder="不限">
            <el-option
              v-for="item in paymentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </PanelLabelItem>
      </PanelLabelItem>
    </section>
    <!-- 图表 -->
    <section class="base-page-container">
      <p class="whole__sales">
        <span class="whole__sales__label">最高访客数为<strong class="whole__sales__value">2,923</strong></span>
        <span class="whole__sales__label">最低访客数为<strong class="whole__sales__value">61</strong></span>
        <span class="whole__sales__label">所选区间总访客数为<strong class="whole__sales__value">61</strong></span>
      </p>
      <section class="whole__chart">
        <KLineChart
          width="100%"
          height="236px"
          x-type="date"
          y-type="number"
          :x-data="lineChartXData"
          :y-data="lineChartYData"
          :options="{ showSeriesName: true, seriesName: '访客数' }"
        />
      </section>
    </section>
    <!-- 表格 -->
    <section class="base-page-container">
      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
      </KTable>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { BaseRadioGroupLabelItem } from '@/components/base-form';
import { KLineChart } from '@/components/k-charts';
import { PanelLabelItem } from '@/components/base-panel';
import { useTableList } from './hooks/use-table-whole';
import { deviceOptions, userLabelOptions, userOptions, memberTypeOptions, durationOptions,
  teamCountOptions, paymentOptions, targetOptions, lineChartYData, lineChartXData } from './data.ts';
defineOptions({
  name: 'KgjAnalysisBehavior'
});
const { state, tableState, tableEvent } = useTableList({ });
const deviceSelect = ref(0);
// 单选
const deviceChange = (val: string | number | boolean) => {
  console.log(val);
};
const userLabelSelect= ref(0);
const userLabelChange = (val: string | number | boolean) => {
  console.log(val);
};
const targetSelect = ref(null);
//
const dateRange = ref(null);
const dateChange = () => {
  console.log(11);
};
</script>
<style lang="scss" scoped>
.whole {
  &__title {
    height: 24px;
    margin-bottom: $baseMarginBottom;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
  }

  &__sales {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: #909399;
    letter-spacing: -.01px;

    &__label {
      padding-right: 24px;
    }

    &__value {
      padding-left: 2px;
      font-weight: 500;
      color: #606266;
    }
  }

  &__chart {
    display: flex;
    align-items: center;
    height: 236px;
    margin-top: 16px;
  }
}
</style>
